<!--
专项缴费详情页
-->
<template>
  <div class="app-container">
    <el-card class="info-card">
      <UfInfo v-model="listId"></UfInfo>
    </el-card>
    <el-card class="info-card">
      <!-- 缴费项目详情 -->
      <el-row :gutter="10" class="mb8">
        <!-- 发布账单 -->
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-s-promotion"
            size="mini"
            @click="handleRelease"
            v-hasPermi="['uniquefees:stu_book:release']"
          >发布
          </el-button>
        </el-col>
        <!-- 删除账单 -->
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-refresh-left"
            size="mini"
            @click="handleRevokeRelease"
            v-hasPermi="['uniquefees:stu_book:release']"
          >撤回发布
          </el-button>
        </el-col>
        <el-col :span="1.5" style="float: right; padding: 3px 0">
          <el-button
            circle
            icon="el-icon-refresh"
            size="mini"
            @click="getList"
          />
        </el-col>
        <!--  显示列表控制    -->
        <el-col :span="1.5" style="float: right; margin-right: 5px">
          <el-dropdown :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button icon="el-icon-setting" circle size="mini"/>
                </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="field in columns" :key="field.key">
                <el-checkbox :value="field.visible" @change="downChange(field.key)">{{ field.label }}</el-checkbox>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <el-table :data="studentData" v-loading="loading" style="width: 100%" border>
        <el-table-column type="index" width="50"/>
        <el-table-column prop="id" label="id" v-if="columns[0].visible"/>
        <el-table-column prop="stuNo" label="学号" v-if="columns[1].visible"/>
        <el-table-column prop="name" label="姓名" v-if="columns[2].visible"/>
        <el-table-column prop="total" label="合计" v-if="columns[3].visible"/>
        <el-table-column prop="order" label="状态" v-if="columns[4].visible">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.trade_state" :value="scope.row.order"/>
            <el-tag v-if="scope.row.order === undefined" type="danger">未发布</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-s-promotion"
              @click="handleReleaseOne(scope.row.id)"
              v-hasPermi="['uniquefees:stu_book:release']"
              v-if="scope.row.order === undefined"
            >发布
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-refresh-left"
              @click="handleRevokeReleaseOne(scope.row.id)"
              v-if="scope.row.order"
              v-hasPermi="['uniquefees:stu_book:release']"
            >撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


  </div>
</template>

<script>


import PayItem from "@/views/uniquefees/payStuItem/payItem/index.vue";
import Bill from "@/views/uniquefees/payStuItem/bill/index.vue";
import UfInfo from "@/views/uniquefees/payStuItem/info/index.vue";
import {
  getPayStuV2,
  releaseStuList,
  releaseStuListOne,
  revokeReleaseOne,
  revokeReleaseStu_book
} from "@/api/uniquefees/stu_book";

export default {
  props: {
    value: [String, Object, Array]
  },
  name: "PaymentInfo",
  components: {UfInfo, Bill, PayItem},
  dicts: ['trade_state'],
  data() {
    return {
      listId: '1708997044054',
      // 遮罩层
      loading: false,
      studentData: [
        {id: 1, name: "曹天葵", total: 384.10, signature: ""},
        {id: 2, name: "邓庆伟", total: 373.40, signature: ""},
        // 其他学生信息省略...
      ],
      // 列信息
      columns: [
        {key: 0, prop: 'id', label: `id`, visible: false},
        {key: 1, prop: 'stuNo', label: `学号`, visible: false},
        {key: 2, prop: 'name', label: `姓名`, visible: true},
        {key: 3, prop: 'total', label: `合计`, visible: true},
        {key: 4, prop: 'order', label: `订单`, visible: true},
      ],
    };
  },
  created() {
    this.listId = (this.$route.params && this.$route.params.id) || this.listId
    this.getList();
  },
  methods: {
    /**
     * 查询缴费学生
     */
    getList() {
      this.loading = true;
      getPayStuV2(this.listId).then(response => {
        const student = response.data.stuList;
        const special = response.data.special;
        this.initDate(student, special);
        this.loading = false;
      });
    },
    /**
     * 格式化数据结构
     * @param date
     * @param special
     */
    initDate(date, special) {
      const emptyArray = [];
      date.forEach(stu => {
        let item = {
          id: stu.studentId,
          name: stu.studentName,
          stuNo: stu.stuNo,
          total: (special.pricesum / 100).toFixed(2),
          order: (stu.orders && stu.orders.status)||undefined,
        }
        emptyArray.push(item);
      })
      this.studentData = emptyArray;
    },
    /**
     * 展示的列表
     * @param val
     */
    downChange(val) {
      const column = this.columns.find(col => col.key === val);
      if (column) {
        column.visible = !column.visible;
      }
    },
    /** 发布按钮操作 */
    handleRelease() {
      this.loading = true;
      const data = {id: this.listId}
      console.log(data)
      this.$modal.confirm('发布账单需要花费较长时间，请耐心等待！').then(function () {
        return releaseStuList(data)
      }).then(() => {
        this.loading = false;
        this.$modal.msgSuccess("已发布账单,前往订单系统查看！");
        this.getList();
      }).catch(() => {
        this.loading = false;
      });

    },
    /** 发布按钮操作 */
    handleReleaseOne(studentId) {
      this.loading = true;
      const data = {listId: this.listId,studentId:studentId}
      console.log(data)
      this.$modal.confirm('发布账单需要花费较长时间，请耐心等待！').then(function () {
        return releaseStuListOne(data)
      }).then(() => {
        this.loading = false;
        this.$modal.msgSuccess("已发布账单,前往订单系统查看！");
        this.getList();
      }).catch(() => {
        this.loading = false;
      });

    },
    /** 撤回发布发布按钮操作 */
    handleRevokeRelease() {
      this.loading = true;
      const data = {
        scheduleId: this.listId,
      }
      this.$modal.confirm('撤回发布，会删除所有账单，请慎重操作！').then(function () {
        return revokeReleaseStu_book(data)
      }).then(() => {
        this.loading = false;
        this.$modal.msgSuccess("已撤回账单！");
        this.getList();
      }).catch(() => {
        this.loading = false;
      });
    },
    /** 撤回发布发布按钮操作 */
    handleRevokeReleaseOne(studentId) {
      this.loading = true;
      const data = {
        scheduleId: this.listId,
        studentId:studentId
      }
      this.$modal.confirm('撤回发布，会删除所有账单，请慎重操作！').then(function () {
        return revokeReleaseOne(data)
      }).then(() => {
        this.loading = false;
        this.$modal.msgSuccess("已撤回账单！");
        this.getList();
      }).catch(() => {
        this.loading = false;
      });
    },
  }
}
;
</script>

<style>
.info-card {
  margin-bottom: 20px;
  border-radius: 30px;
}
</style>
